<template>
  <!-- <a-trigger
    position="bottom"
    auto-fit-position
    trigger="click"
    :unmount-on-close="false"
    show-arrow
    :popup-translate="[0, 10]"
  > -->
  <a-popover
    trigger="click"
    position="br"
    :content-style="{ padding: 0, width: '240px' }"
    content-class="message-popover"
  >
    <a-badge :count="9" dot>
      <div class="list" id="driver-info" @click="onHandNotification">
        <IconNotification></IconNotification>
      </div>
    </a-badge>
    <template #content> 123 </template>
  </a-popover>
</template>

<script setup>
import { ref } from "vue";
import { IconNotification } from "@arco-design/web-vue/es/icon";

function onHandNotification() {
  console.log("消息");
}
</script>

<style lang="less">
.message-popover {
  .arco-popover-content {
    padding: 0;
    margin: 0;
  }
}
</style>
